<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="<%=basePath%>">

<title>Log列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script src="${path }/resources/js/jquery-3.1.1.js"></script>
<script src="${path }/resources/js/bootstrap.min.js"></script>
<script src="${path }/resources/js/date/jedate.js"></script>

<link href="${path }/resources/css/bootstrap.min.css" rel="stylesheet">
<link href="${path }/resources/css/date/gray.css" rel="stylesheet">
<link href="${path }/resources/css/date/green.css" rel="stylesheet">
<link href="${path }/resources/css/date/jedate.css" rel="stylesheet">
<link href="${path }/resources/css/date/red.css" rel="stylesheet">
<script type="text/javascript">

	$(function() {		
		
		getCat(0);
		getCat(1);
		getCat(2);
		
		$("#shd").bind("click", function()
		{
			search(0);
		});
		$("#listAll").bind("click", function()
		{
			search(1);
		});
		
	});
	
	function search(isAll)
	{
		var param;
		if(isAll == 0)
		{
			var start = $("#dateStart").val();
			var end = $("#dateEnd").val();
			var brand = $("#lab_brand").text();
			var model = $("#lab_model").text();
			var api = $("#lab_api").text();
			
			if (start != "" && end != "") {
				param = "startTime=" + start + "&endTime=" + end;
			} else if (start == "" && end != "") {
				param = "endTime=" + end;
			} else if (end == "" && start != "") {
				param = "startTime=" + start;
			} else {
				param = "";
			}
			
			param += (param=="" ? "brand=" + brand : "&brand=" + brand);
			param += (param=="" ? "model=" + model : "&model=" + model);
			param += (param=="" ? "api=" + api : "&api=" + api);
		}else
		{
			param = "";
		}
		
		$.ajax({
			type : 'POST',
			url : "access/logDList",
			data : param,
			success : function(data) {
				$("#listBody").empty();
				var resp = $.parseJSON(data)
				var list = resp.rows;
				for (var i = 0; i < list.length; i++) {
					var ss = "<tr onclick='pop($(this).children(\".c_logid\").text())'>";
					var sd = "</tr>";
					if (list[i].logType == 0) {
						ss += "<td class='danger'>App异常信息</td>";
					} else {
						ss += "<td class='warning'>App异常信息</td>";
					}
					ss += "<td>" + list[i].logTime + "</td>";
					ss += "<td>" + list[i].logName + "</td>";

					ss += "<td>" + list[i].logDeviceBrand + "</td>";
					ss += "<td>" + list[i].logDeviceModel + "</td>";
					ss += "<td>" + list[i].logDeviceApi + "</td>";
					var uid = list[i].logUserId;
					ss += "<td>" + (uid==null?"无":uid) + "</td>";

					ss += "<td class='hide c_logid'>" + list[i].id + "</td>";
					ss += "<td>" + list[i].logSize + "字节</td>";
					ss += sd;
					$("#listBody").append(ss);
				}
			}
		});
	}
	
	function getCat(index) {
		$.ajax({
			type : 'POST',
			url : "access/categary",
			data : "cat=" + index,
			success : function(data) {
				var resp = $.parseJSON(data)
				var list = resp.rows;
				var apd="";
				switch(index)
				{
					case 0:
						 for (var i = 0; i < list.length; i++) 
						 {
						 	apd += "<li onclick='setValue("+"\""+list[i]+"\""+",0)'><a>"+list[i]+"</a></li>";
						 }
						 $("#ul_brand").html(apd);
					break;
					case 1: 
						for (var i = 0; i < list.length; i++) 
						 {
						 	apd += "<li onclick='setValue("+"\""+list[i]+"\""+",1)'><a>"+list[i]+"</a></li>";
						 }
						 $("#ul_model").html(apd);
					break;
					case 2: 
						for (var i = 0; i < list.length; i++) 
						 {
						 	apd += "<li onclick='setValue("+"\""+list[i]+"\""+",2)'><a>"+list[i]+"</a></li>";
						 }
						 $("#ul_api").html(apd);
					break;
				}
			}
		});
	}
	
	function setValue(str, index)
	{
		switch(index)
		{
			case 0:
				$("#lab_brand").text(str);
				$("#lab_brand").append("<span class='caret'></span>");
			break;
			case 1: 
				$("#lab_model").text(str);
				$("#lab_model").append("<span class='caret'></span>");
			break;
			case 2: 
				$("#lab_api").text(str);
				$("#lab_api").append("<span class='caret'></span>");
			break;
		}
	}
	
	function pop(id) {
		$.ajax({
			type : 'POST',
			url : "access/logFileDetail",
			data : "id=" + id,
			success : function(data) {
				var resp = $.parseJSON(data)
				var mapinfo = resp.mapInfo;
				var obj = mapinfo.other;

				var deviceBrand = obj.logDeviceBrand;
				var deviceModel = obj.logDeviceModel;
				var deviceApi = obj.logDeviceApi;
				var userId = obj.logUserId;
				var content = obj.logUrl;
				$("#deviceBrand").val(deviceBrand);
				$("#deviceModel").val(deviceModel);
				$("#deviceApi").val(deviceApi);
				$("#deviceUserId").val(userId);
				$("#logContent").html(content);
				$("#myModal").modal('show');
			}
		});
	}
	
	
</script>
</head>
<body>
	<nav class="navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="#"> <span
				class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
			</a>
			<p class="navbar-text">Log列表</p>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li>
					<button type="button" class="btn btn-default navbar-btn"
						onclick="jeDate({dateCell:'#dateStart',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})">开始日期</button>
					<input id="dateStart" type="text"
					style="width: 200px;display: inline" readOnly="true"
					class="form-control" placeholder="Search"/>
				</li>
				<li>
					<button type="button" class="btn btn-default navbar-btn"
						style="margin-left: 100px"
						onclick="jeDate({dateCell:'#dateEnd',isTime:true,format:'YYYY-MM-DD hh:mm:ss'})">结束日期</button>
					<input id="dateEnd" type="text"
					style="width: 200px;display: inline" readOnly="true"
					class="form-control" placeholder="Search"/>
				</li>
				<li><a id="lab_brand" href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">手机品牌<span class="caret"></span>
				</a>
					<ul id="ul_brand" class="dropdown-menu" aria-labelledby="drop2">
					</ul>
				</li>
				<li><a id="lab_model" href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">手机型号 <span class="caret"></span>
				</a>
					<ul id="ul_model" class="dropdown-menu" aria-labelledby="drop2">
					</ul>
				</li>
				<li>
					<a id="lab_api" href="#" class="dropdown-toggle"
						data-toggle="dropdown" role="button" aria-haspopup="true"
						aria-expanded="false">系统版本 <span class="caret"></span>
					</a>
					<ul id="ul_api" class="dropdown-menu" aria-labelledby="drop2">						
					</ul>
				</li>
				<li>
					<a id="shd" class="btn btn-info">
				 		 按条件查找
					</a>					
				</li>
				<li>
					<a id="listAll" class="btn btn-default" style="margin-left: 30px;">列出所有</a>
				</li>		
			</ul>
		</div>
	</div>
	</nav>
	<div class="table-responsive">
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<th>Log类型</th>
					<th>Log添加时间</th>
					<th>Log名称</th>
					<th>手机品牌</th>
					<th>手机型号</th>
					<th>API版本</th>
					<th>用户ID</th>
					<th>Log大小(字节)</th>
				</tr>
			</thead>
			<tbody id="listBody">
				<c:forEach items="${requestScope.list }" var="log">
					<tr onclick="pop($(this).children('.c_logid').text())">
						<c:choose>
							<c:when test="${log.logType == 0 }">
								<td class="danger">App异常信息</td>
							</c:when>
							<c:otherwise>
								<td class="warning">其他异常信息</td>
							</c:otherwise>
						</c:choose>
						<td>${log.logTime }</td>
						<td>${log.logName }</td>
						<td>${log.logDeviceBrand }</td>
						<td>${log.logDeviceModel }</td>
						<td>${log.logDeviceApi }</td>
						<c:choose>
							<c:when test="${log.logUserId == null }">
								<td>无</td>
							</c:when>
							<c:otherwise>
								<td>${log.logUserId }</td>
							</c:otherwise>
						</c:choose>
						<td class="hide c_logid">${log.id }</td>
						<td>${log.logSize }字节</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Log详情</h4>
				</div>
				<div class="modal-body">
					<div class="input-group">
						<span class="input-group-addon" id="basic-addon1">手机品牌</span> <input
							type="text" id="deviceBrand" class="form-control" readOnly="true"
							aria-describedby="basic-addon1" />
					</div>
					<div class="input-group">
						<span class="input-group-addon" id="basic-addon1">手机型号</span> <input
							type="text" id="deviceModel" class="form-control" readOnly="true"
							aria-describedby="basic-addon1" />
					</div>
					<div class="input-group">
						<span class="input-group-addon" id="basic-addon1">安卓版本</span> <input
							type="text" id="deviceApi" class="form-control" readOnly="true"
							aria-describedby="basic-addon1" />
					</div>
					<div class="input-group">
						<span class="input-group-addon" id="basic-addon1">用户标识</span> <input
							type="text" id="deviceUserId" class="form-control"
							readOnly="true" aria-describedby="basic-addon1" />
					</div>
				</div>
				<div id="logContent" class="well well-lg"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	function jumpInfo(s) {
		location.href = "upload/choose";
		//alert(s);
	}
	jeDate.skin('gray')
	jeDate({
		dateCell : "#indate",//isinitVal:true,
		format : "YYYY-MM",
		isTime : false, //isClear:false,
		minDate : "2015-10-19 00:00:00",
		maxDate : "2016-11-8 00:00:00"
	})
	jeDate({
		dateCell : "#dateinfo",
		format : "YYYY年MM月DD日 hh:mm:ss",
		isinitVal : true,
		isTime : true, //isClear:false,
		minDate : "2014-09-19 00:00:00",
		okfun : function(val) {
			alert(val)
		}
	})
</script>
</html>